//<li class="list-group-item d-flex justify-content-between align-items-center">
//    <span>学习 JavaScript</span>
//<button type="button" class="close" aria-label="Close">
//    <span aria-hidden="true">&times;</span>
//</button>
//</li>
//数据
let lists =['学习 JavaScript','学习 CSS3','学习 HTML5'];
function d() {
document.querySelector('#ul').innerHTML=""
    for (let i = 0; i < lists.length; i++) {
        //创建li标签
        let li = document.createElement('li')
        //给li标签添加内部样式
        li.className = 'list-group-item d-flex justify-content-between align-items-center'

        //创建span
        let span = document.createElement('span')
        let spantext = document.createTextNode(lists[i])
        span.appendChild(spantext)
        //先把span设置为不可编辑状态
        span.setAttribute('contenteditable',false)
        //给span加双击事件
        span.addEventListener('dblclick',function(){
            //span设置为可编辑状态
            span.setAttribute('contenteditable',true)
        })
        //span加失去焦点事件
        span.addEventListener('blur',function(){
            //span设置不可编辑状态
            span.setAttribute('contenteditable',false)
        })
        li.appendChild(span)

        //创建button
        let button = document.createElement('button')
        button.type = 'button'
        button.classList.add('close')
        button.innerHTML = '&times;'
        //给button加事件
        button.addEventListener('click',function(){
            console.log(i)
            lists.splice(i,1)
            //点击后，在重新渲染一遍DOM
            d()
        })
        li.appendChild(button)

        //把li添加到ul里面
        let ul = document.querySelector('#ul')
        ul.appendChild(li)
    }
}
d()
let btn=document.querySelector('#btn')
btn.addEventListener('click',function(){
    let text=document.querySelector('#ipt')
    if (text.value != ""){
        lists.unshift(text.value)
        text.value=""
    }else {
        alert('不可以为空')
    }
    //执行for循环
d()
})
